<!-- 组件相关参数说明:由于在点击节点时才进行该层数据的获取，默认情况下 Tree 无法预知某个节点是否为叶子节点，所以会为每个节点添加一个下拉按钮，如果节点没有下层数据，
     则点击后下拉按钮会消失。同时，你也可以提前告知 Tree 某个节点是否为叶子节点，从而避免在叶子节点前渲染下拉按钮。
     props:
        label	指定节点标签为节点对象的某个属性值	string, function(data, node)	—	—
        children	指定子树为节点对象的某个属性值	string	—	—
        disabled	指定节点选择框是否禁用为节点对象的某个属性值	boolean, function(data, node)	—	—
        isLeaf	指定节点是否为叶子节点，仅在指定了 lazy 属性的情况下生效	boolean, function(data, node)	—
     loadNode:是一个函数,加载子树数据的方法，仅当 lazy 属性为true 时生效
        loadNode(node, resolve) 其中node就是当前的节点对象，resolve，就相当于点击节点加载子数据的响应结果，返回值直接给props进行tree结果渲染
     lazy: 是否懒加载子节点，需与 load 方法结合使用
     show-checkbox,是否展示选择框
     accordion:是否每次只打开一个同级树节点展开
-->
<template>
  <div class="tree">
      <el-tree
        :props="props"
        :load="loadNode"
        @node-click="sendData"
        accordion
        lazy>
    </el-tree>
  </div>
</template>

<script>
 export default {
    data() {
      return {
        props: {
          label: 'name',
          children: 'zones',
          isLeaf: 'leaf'
        },
      };
    },
    methods: {
      //点击左边的分类树，将分类的名称传递给右边的表单项 所属分类，使用事件 node-click 节点被点击时的回调 共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。
      sendData(data,node,component){
        console.log("获取节点点击事件data",data)
        console.log("获取节点点击事件node",node)
        this.$emit("sendNodedData",data)
      },

      loadNode(node, resolve) {
        console.log("获取到当前点击的node节点",node)
        if (node.level === 0) { //每进入一层level+1,点击根节点为0
          //通过接口获取商品分类数据
          this.$api.queryCategoryItemByCid().then(  //同步获取数据，异步可能出现数据为NULL的现象
            res => {
                console.log("获取到category数据为",res.data)
                if(res.data.status == 200){
                    return resolve(res.data.result); //首先只展示一个根节点，resolve()函数的返回值直接给props  {}
                }else{
                     return resolve([]);
                }
            }

          )
        }
        if (node.level >= 1) {
            this.$api.queryCategoryItemByCid({type:node.data.cid}).then(
                res =>{
                    if(res.data.status == 200){
                        return resolve(res.data.result); //首先只展示一个根节点，resolve()函数的返回值直接给props
                    }else{
                        return resolve([]);
                    }
                }
            )  //点击node传递当前node的cid

        }
        // setTimeout(() => {
        //   const data = [{
        //     name: 'leaf',  
        //     leaf: true  //子节点是否还有数据，如果没有是否展示展开箭头按钮 true：不展示 false：展示，默认false
        //   }, {
        //     name: 'zone'
        //   }];

        //   resolve(data);
        // }, 500);
      }
    }
  };
</script>

<style lang="less" scoped>
    .tree{
        padding:20px
    }

</style>